import React,{useEffect,useState} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    DeviceEventEmitter, TextInput,
} from 'react-native';
import Header from '../../widgets/Header';
import {getffly} from '../../utils/common';
import screen from '../../utils/screen';
import Constants from '../../utils/Constants';
import {useStores} from '../../store';
import {observer} from 'mobx-react';
import {LGBtn} from '../../widgets/buttons';
import RequestUtil from '../../utils/RequestUtil';
import Api from '../../utils/Api';
import {AppModal} from '../../widgets/modal';
import AppEvent from '../../utils/AppEvent';

export default observer( ({navigation})=>{


    const {userStore} = useStores()
    const [nickname,setNickname] = useState(userStore.userInfo.nickName)
    useEffect(()=>{
        console.log('change name',userStore)
    },[])

    const changeName = ()=>{
        AppModal.showLoading()
        let parma = {nickName:nickname}
        RequestUtil.post(Api.updateName,parma,true).then(res=>{
            AppModal.hideTip()
            DeviceEventEmitter.emit(AppEvent.update_account)
            userStore.setUser(null,{
                nickName:nickname
            })
            navigation.pop()
        },error=>{
            AppModal.hideTip()
            console.log(error)
            AppModal.showError(error.msg)
        })
    }

    return (
        <View style={styles.container}>
            <Header title={Constants.account.nickname} navigation={navigation}/>

            <View style={styles.content}>
                <Text style={{color:'#000',fontSize:12}}>{Constants.account.set_your_nickname}</Text>

                <TextInput
                    allowFontScaling={false}
                    placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                    placeholder={''}
                    maxLength={30}
                    style={styles.input}
                    value={nickname}
                    onChangeText={(text) => {
                        setNickname(text)
                    }}
                />

                {
                    nickname.length > 0 && nickname !== userStore.userInfo.nickName ? (
                        <LGBtn
                            style={{width:'100%',height:screen.PIXEL_90,marginTop:screen.PIXEL_60}}
                            title={Constants.common.save}
                            onPress={()=> changeName() }
                        />
                    ) : (
                        <View style={styles.btnGray}>
                            <Text style={{fontSize: 15,color:'#fff'}}>Save</Text>
                        </View>
                    )
                }

            </View>


        </View>
    )
})

const styles= StyleSheet.create({
    container:{
        flex:1
    },
    content:{
        flex:1,
        paddingHorizontal:screen.PIXEL_60
    },
    input:{
        fontFamily:getffly("bold"), height: screen.PIXEL_90, width: '100%', color: '#377C74', textAlign: 'center', padding: 0, fontSize: 30,
        borderBottomWidth:1,borderBottomColor:'rgba(32,32,32,0.3)'
    },
    btnGray:{
        width:'100%',height:screen.PIXEL_90,marginTop:screen.PIXEL_60,borderRadius:screen.PIXEL_90/2,
        backgroundColor:'#C1C1C1',justifyContent:'center',alignItems:'center'
    }
})
